<template>
    <h1>我是购物车</h1>
    全选 <input type="checkbox" @click="clickAll" /> 总计: {{ totalPrice }}

    <div v-for="item in list" :key="item.id">
        <!-- <input type="checkbox" v-model="item.proStatus" @click="clickItem" /> -->
        <input type="checkbox" :checked="item.proStatus" @click="clickItem(item.id, $event)" />
        --- 商品名 {{ item.proName }}
        --- 商品价格 {{ item.proPrice }}
        --- <button @click="add(item.id)">+</button> {{ item.proNumber }} <button @click="sub(item.id)">-</button>
        --- 小计: {{ item.proPrice * item.proNumber }}
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    id: 1,
                    proName: "羊肉串",
                    proPrice: 20,
                    proNumber: 5,
                    proStatus: false,
                },
                {
                    id: 2,
                    proName: "一个食品",
                    proPrice: 10,
                    proNumber: 3,
                    proStatus: false,
                },
                {
                    id: 3,
                    proName: "一个手机",
                    proPrice: 1000,
                    proNumber: 1,
                    proStatus: false,
                },
            ],
            totalPrice: 0,
        };
    },
    methods: {
        // 全选商品
        clickAll(e) {
            this.list.forEach((item) => {
                item.proStatus = e.target.checked;
            });

            this.getTotalPrice();
        },
        // 计算总计
        getTotalPrice() {
            let _totalPrice = 0;
            this.list.forEach((item) => {
                if (item.proStatus) {
                    _totalPrice += item.proNumber * item.proPrice;
                }
            });
            this.totalPrice = _totalPrice;
        },
        // 选中某一项
        clickItem(id, e) {
            // 商品的选中状态使用 v-model 处理
            // setTimeout(() => {
            //     this.getTotalPrice();
            // });

            this.list.forEach(item => {
                if (item.id === id) {
                    item.proStatus = e.target.checked
                }
            })

            this.getTotalPrice()
        },
        // 增加商品收藏数量
        add(id) {
            // console.log("数量+1", id);
            const info = this.list.find((item) => item.id === id);
            info.proNumber++;

            this.getTotalPrice();
        },
        // 减少商品收藏数量
        sub(id) {
            const info = this.list.find((item) => item.id === id);

            if (info.proNumber === 1) return;

            info.proNumber--;

            this.getTotalPrice();
        },
    },
};
</script>

<style></style>
